<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格操作</title>
	</head>
	<style>
		table {
			
			    border-collapse: collapse;
		}
			
	 th, td {
		max-width: 100px;
		padding: 12px;
		border: 1px solid #DCDFE6; /* 表头和单元格的边框 */
		white-space: nowrap; /* 文本不换行 */
		overflow: hidden; /* 溢出内容隐藏 */
		text-overflow: ellipsis; /* 溢出内容显示省略号 */
		position: relative; /* 相对定位，为了后续的绝对定位 */
		z-index: 1; /* 堆叠顺序，较低的值 */
	  }
	  
	  th{
		 color: #303133; 
		 background-color: #909399;
	  }
	  
	  td{
		 color: #606266; 
		 height: 21px;
	  }
		  
	  .tooltip {
	    position: absolute; /* 绝对定位 */
	    display: none; /* 初始隐藏提示框 */
	    background-color: #fff; /* 提示框背景色 */
	    border: 1px solid #ccc; /* 提示框边框 */
	    padding: 6px; /* 提示框内边距 */
	    border-radius: 4px; /* 提示框边框圆角 */
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 提示框阴影 */
	    z-index: 2; /* 堆叠顺序，较高的值 */
	  }
	  
	  .tooltip::after {
	    content: ""; /* 创建伪元素的内容 */
	    position: absolute; /* 绝对定位 */
	    bottom: -10px; /* 调整箭头位置 */
	    left: 15%; /* 初始箭头水平居中 */
	    transform: translateX(-50%); /* 初始箭头水平居中 */
	    border: 10px solid transparent; /* 控制箭头大小 */
	    border-top-color: #ccc; /* 箭头颜色 */
	  }
	</style>
	<body>
		<div>
			<table>
				<tr>
				    <th rowspan="2" >行合并两个</th>
				    <th colspan="2">列合并两个</th>
				</tr>
			    <tr>
			        <th title="张三长长长长">周一</th>
			        <th title="张三长长长长1">周二</th>
			    </tr>
			    <tr>
			        <td title="张三长长长长长长长长长长长长长长长长长长长长长的姓名">1111111111111111111111111111111111111dddd顶顶顶111111111111111</td>
			        <td title="张三长长长长22"></td>
			        <td title="张三长长长长222222"></td>
			    </tr>
			    <tr>
			        <td title="张三长长长长长长长长长长长长长长长长长长长长长的姓名">张三长长长长长长长长长长长长长长长长长长长长长的姓名</td>
			        <td title="张三长长长长11111"></td>
			        <td title="张三长长长长111111111"></td>
			    </tr>
			    <tr>
			        <td title="张三长长长长2444444"></td>
			        <td title="张三长长长长4444444444"></td>
			        <td title="张三长长长长444444444"></td>
			    </tr>
			</table>
		</div>
		
		<div class="tooltip" ></div>
		
		<script>
			 const cells = document.querySelectorAll('td[title]');
			  const tooltip = document.querySelector('.tooltip');
			
			  cells.forEach(cell => {
			     cell.addEventListener('mousemove', (event) => { // 监听鼠标移动事件
			     tooltip.style.display = 'block'; // 显示提示框
			     tooltip.textContent = cell.getAttribute('title'); // 设置提示框内容
				 
				  tooltip.style.left = `${event.clientX}px`;
				 tooltip.style.top = `${event.clientY - tooltip.offsetHeight - 20}px`;
					   
				 tooltip.style.left = `${cellRect.left - tableRect.left + (cellRect.width / 2)}px`; // 设置提示框水平位置
				 tooltip.style.top = `${cellRect.top - tableRect.top - tooltip.offsetHeight - 20}px`; // 设置提示框垂直位置
					   
				   
				tooltip.style.transformOrigin = `${event.clientX }px center`; // 设置箭头指向鼠标所在位置
						 
			   });
			     cell.addEventListener('mouseleave', () => { // 监听鼠标离开事件
			       tooltip.style.display = 'none'; // 隐藏提示框
			     });
			   });
		</script>
	</body>
</html>